<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login - WebSql - Online database query system</title>
    <style type="text/css">
        .login-page {
            width: 360px;
            padding: 8% 0 0;
            margin: auto;
        }
        .form {
            position: relative;
            z-index: 1;
            background: #FFFFFF;
            max-width: 360px;
            margin: 0 auto 100px;
            padding: 45px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
        }
        .form input {
            font-family: "Roboto", sans-serif;
            outline: 0;
            background: #f2f2f2;
            width: 100%;
            border: 0;
            margin: 0 0 15px;
            padding: 15px;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 14px;
        }
        .form button {
            font-family: "Roboto", sans-serif;
            text-transform: uppercase;
            outline: 0;
            background: #4CAF50;
            width: 100%;
            border: 0;
            border-radius: 5px;
            padding: 15px;
            color: #FFFFFF;
            font-size: 14px;
            -webkit-transition: all 0.3 ease;
            transition: all 0.3 ease;
            cursor: pointer;
        }
        .form button:hover,.form button:active,.form button:focus {
            background: #43A047;
        }
        .form .message {
            margin: 15px 0 0;
            color: #b3b3b3;
            font-size: 12px;
        }
        .form .message a {
            color: #4CAF50;
            text-decoration: none;
        }
        .form .register-form {
            display: none;
        }
        .container {
            position: relative;
            z-index: 1;
            max-width: 300px;
            margin: 0 auto;
        }
        .container:before, .container:after {
            content: "";
            display: block;
            clear: both;
        }
        .container .info {
            margin: 50px auto;
            text-align: center;
        }
        .container .info h1 {
            margin: 0 0 15px;
            padding: 0;
            font-size: 36px;
            font-weight: 300;
            color: #1a1a1a;
        }
        .container .info span {
            color: #4d4d4d;
            font-size: 12px;
        }
        .container .info span a {
            color: #000000;
            text-decoration: none;
        }
        .container .info span .fa {
            color: #EF3B3A;
        }
        body {
            background: #76b852; /* fallback for old browsers */
            background: -webkit-linear-gradient(right, #76b852, #8DC26F);
            background: -moz-linear-gradient(right, #76b852, #8DC26F);
            background: -o-linear-gradient(right, #76b852, #8DC26F);
            background: linear-gradient(to left, #76b852, #8DC26F);
            font-family: "Roboto", sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <script type="text/javascript" src="/jquery.min.js"></script>
    <script type="text/javascript" src="/js/websql.js"></script>
    <link rel="stylesheet" type="text/css" href="/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/themes/icon.css">
    <script type="text/javascript" src="/jquery.easyui.min.js"></script>
</head>
<body>
<div class="login-page">
    <div class="form">
        <!--<div class="register-form">
            <input type="text" placeholder="name"/>
            <input type="password" placeholder="password"/>
            <input type="text" placeholder="email address"/>
            <button>create</button>
            <p class="message">Already registered? <a href="#">Sign In</a></p>
        </div>-->
        <div class="login-form">
            <input type="text" placeholder="邮箱/用户名" id="emailOrUname" name="emailOrUname"/>
            <input type="password" placeholder="密码" name="password" id="password"/>
            <input type="text" placeholder="验证码" name="verifyCode" id="verifyCode"/>
            <div class="message" style="padding: 0 0 20px 0">
                <a id="getVerifyCode" href="#" >获取验证码</a>
            </div>
            <button id="login" onclick="">login</button>
            <p class="message">Not registered? <a href="#">Contact your administrator</a></p>
        </div>
    </div>
</div>
<script>
    $("#getVerifyCode").click(function () {
        var email = $("#emailOrUname").val();
        if (!email) {
            $.messager.alert('Error','Please input email or username !');
        }

        postjson("/user/sendVerifyCode", {emailOrUname: email}, function (data) {
            if (data.code == 200) {
                $.messager.show({
                    title:'验证码已发送',
                    msg:'验证码已发送',
                    showType:'show'
                });
            } else {
                $.messager.alert('Error','验证码发送失败，请稍后重试!' + data.message,'error');
            }
        });
    });

    $("#login").click(function () {
        var uname = $("#emailOrUname").val();
        var passwd = $("#password").val();
        var verifyCode = $("#verifyCode").val();

        if (!uname || !passwd || !verifyCode) {
            $.messager.alert('Error', '所有字段都是必填 !');
            return;
        }

        postjson("/user/tryLogin", {emailOrUname: uname,password:passwd,verifyCode:verifyCode}, function (data) {
            if (data.code == 200) {
                localStorage.setItem("uname", JSON.stringify(data.data));
//                window.location.href="/html/portal.html"
                window.location.href="/"
            } else {
                $.messager.alert('登录失败',data.message,'error');
            }
        });
    });

    /*$('.message a').click(function(){
        $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
    });*/
</script>
</body>
</html>